import { ReactElement, useEffect, useContext, RefObject } from 'react'
import { Modal } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { useNavigate, NavigateFunction, useLocation } from 'react-router-dom'
import { scrollToAnchor } from '@js/tool'
// import FreeScrollBar from 'react-free-scrollbar'
import style from './index.module.less'
import icon1 from '@imgs/input-icon1.png'
import icon2 from '@imgs/input-icon2.png'
import icon3 from '@imgs/input-icon3.png'
import classNames from 'classnames'
import { Context } from '../../context'
import { CaseSchema } from '@src/components/schema/caseSchema'

const { confirm } = Modal

function confirmToCheck (d: CaseSchema | null, updateCaseDetail: (d: { [k: string]: any }) => void): void {
  if (d === null) {
    return undefined
  }
  confirm({
    icon: <ExclamationCircleOutlined />,
    content: '您确定要添加抽查吗？',
    onOk () {
      updateCaseDetail({ id: d.id, score_status: '抽查中' })
    }
  })
}

interface Props {
  containerRef: RefObject<HTMLDivElement>
  boundary: string
}

function Main ({ containerRef, boundary }: Props): ReactElement {
  const n = useNavigate()
  const l = useLocation()
  const { activeAnchor, caseDetail, updateCaseDetail } = useContext(Context)
  const hasCheckBlock = caseDetail !== null && ['抽查中', '已抽查'].includes(caseDetail.score_status)
  const showCheckBtn = caseDetail !== null && caseDetail.score_status === '已确认'
  useEffect(() => {
    setTimeout(() => {
      if (l !== null && l.hash !== '') {
        scrollToAnchor(l.hash, undefined, '#content')
      }
    }, 1000)
  }, [])
  return (
    <div className={style.container}>
      <div className={style.inner}>
        <div className={style.block}>
          <div className={style.pic}>
            <img src={icon1} alt="" />
          </div>
          <div className={style['th-line']}>
            <span className={classNames({ [style.active]: ['#inputBlockOne', '#inputBlockTwo'].includes(activeAnchor) })}>案件详情</span>
          </div>
          <div className={style['td-line']}>
            <a className={classNames({ [style.active]: activeAnchor === '#inputBlockOne' })} onClick={() => scrollToAnchor('#inputBlockOne', containerRef, boundary)}>案件流程日期</a>
          </div>
          <div className={style['td-line']}>
            <a className={classNames({ [style.active]: activeAnchor === '#inputBlockTwo' })} onClick={() => scrollToAnchor('#inputBlockTwo', containerRef, boundary)}>程序复杂度</a>
          </div>
        </div>
        <div className={style.block}>
          <div className={style.pic}>
            <img src={icon2} alt="" />
          </div>
          <div className={style['th-line']}>
            <span className={classNames({ [style.active]: ['#inputBlockThree'].includes(activeAnchor) })}>办案秘书评估</span>
          </div>
          <div className={style['td-line']}>
            <a className={classNames({ [style.active]: activeAnchor === '#inputBlockThree' })} onClick={() => scrollToAnchor('#inputBlockThree', containerRef, boundary)}>办案质量</a>
          </div>
        </div>
        <div className={style.block}>
          <div className={style.pic}>
            <img src={icon3} alt="" />
          </div>
          <div className={style['th-line']}>
            <span className={classNames({ [style.active]: ['#inputBlockFour'].includes(activeAnchor) })}>受理秘书评估</span>
          </div>
          <div className={style['td-line']}>
            <a className={classNames({ [style.active]: activeAnchor === '#inputBlockFour' })} onClick={() => scrollToAnchor('#inputBlockFour', containerRef, boundary)}>受理工作量</a>
          </div>
        </div>
        {hasCheckBlock && (
          <div className={style.block}>
            <div className={style.pic}>
              <img src={icon1} alt="" />
            </div>
            <div className={style['th-line']}>
              <span className={classNames({ [style.active]: ['#inputBlockFive', '#inputBlockSix'].includes(activeAnchor) })}>抽查信息录入</span>
            </div>
            <div className={style['td-line']}>
              <a className={classNames({ [style.active]: activeAnchor === '#inputBlockFive' })} onClick={() => scrollToAnchor('#inputBlockFive', containerRef, boundary)}>办案抽查</a>
            </div>
            <div className={style['td-line']}>
              <a className={classNames({ [style.active]: activeAnchor === '#inputBlockSix' })} onClick={() => scrollToAnchor('#inputBlockSix', containerRef, boundary)}>受理抽查</a>
            </div>
          </div>
        )}
        {showCheckBtn && (
          <div className={style['check-btn']}>
            <button onClick={() => confirmToCheck(caseDetail, updateCaseDetail)}>添加抽查</button>
          </div>
        )}
      </div>
    </div>
  )
}

export default Main
